import colors from 'tailwindcss/colors';
import {fontFamily} from 'tailwindcss/defaultTheme';

import {Config} from 'tailwindcss';

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: ['./app/**/*.{tsx,css}', './components/**/*.{tsx,css}'],
  theme: {
    extend: {
      animation: {
        'breathe': 'all 0.5s',
      },
      keyframes: {
        breathe: {
          '0%': {transform: 'scale(1); opacity: 1'},
          '50%': {transform: 'scale(1.2); opacity: 0.5'},
          '100%': {transform: 'scale(1) ;opacity: 1'}
        }
      },
      colors: {
        dark: '#202024',
        light: '#ffffff',
        primary: {
          '100': '#dde0fa',
          '200': '#b4bafc',
          '300': '#5865fc',
          '400': '#4f5efa',
          '500': '#3b4bff',
          '600': '#212db0',
          '700': '#161b57',
          '800': '#0d1138',
        },
        typo: {
          DEFAULT: '#1F1F1F',
          secondary: '#707070',
          tertiary: '#999CA0',
          icons: '#999CA0',
          divider: '#EBEBEB',
          outline: '#D9D9D9',
        },
        gray: colors.zinc,
        'gray-1000': 'rgb(17,17,19)',
        'gray-1100': 'rgb(10,10,11)',
      },
      fontFamily: {
        sans: ['var(--font-sans)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
} satisfies Config;
